<template>
  <div style="padding: 2% 3%;">


    <el-row>
      <el-button-group>
        <el-button type="info" :size='size' @click="addShow" :disabled="toggleShow">新增</el-button>
        <el-button type="info" :size='size' @click="editShow" :disabled="!toggleShow">修改</el-button>
        <el-button v-if="value||toggleShow" type="success" :size='size' @click="save" >保存</el-button>
        <el-button  type="success" :size='size' @click="uplod" >上传</el-button>
      </el-button-group>
      <el-dialog title="上传文件" :visible.sync="dialogVisible" width="31%" >
            <el-form :model="form" :rules="rules" ref="form1" label-width="100px" >
              <el-form-item class=""  label="">
                <el-upload :auto-upload="false" :file-list="uploadlist"	  ref="upload" :limit="limitNum"    drag action="qwer" :before-upload="beforeupload" :on-change="fileChange">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件</div>
                </el-upload>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="qx">取 消</el-button>
              <el-button type="primary" @click="save1" :disabled="saveBtnDisable">保存</el-button>
            </span>
       </el-dialog>
        <!-- 修改下拉框 -->
        <template v-if="!toggleShow">
          <el-select style="margin-left: 1.25rem;" @change="editChange"  :size="size" v-model="value"
            placeholder="请选择二手车车型名称" clearable>
            <el-option v-for="item in options" :key="item.id" :label="item.esccxmc" :value="item.id">
            </el-option>
          </el-select>
        </template>
      <el-button :size="size" icon="el-icon-close" @click="qingkong" v-if="!toggleShow" circle></el-button>
    </el-row>


    <!-- 新增 -->
    <el-row v-if="toggleShow">
      <el-divider></el-divider>
      <!-- 改成行类表单  :inline="true"  -->
      <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="150px">


        <!-- 用br换行 或者div  -->
        <br />

        <div style="margin-top: 1.5rem;">
          <el-form-item label="二手车车型名称" prop="esccxmc">
            <el-input clearable v-model="form.esccxmc"></el-input>
          </el-form-item>
          <el-form-item label="收购价格(元)" prop="sgjg">
            <el-input :size="size" style="width:100%;"  controls-position="right" :precision="2" :step="0.1" :min="0"
              v-model="form.sgjg">
            </el-input>
          </el-form-item>
          <el-form-item label="能源类型" prop="type">
           <el-select v-model="form.type" placeholder="请选择" style="width: 110%;">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.esccxmc"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="数量" prop="shuliang">
            <el-input :size="size" style="width:100%;"  controls-position="right" :precision="2" :step="0.1" :min="0"
              v-model="form.shuliang">
            </el-input>
          </el-form-item>
          <el-form-item label="收购日期" prop="sgrq">
             <el-date-picker
                  v-model="form.sgrq"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
          </el-form-item>
        </div>

      </el-form>
      <el-divider></el-divider>
    </el-row>


    <!-- 修改 -->
    <el-row v-if="!toggleShow">
      <el-divider></el-divider>
      <span v-if="!value">请选择二手车车型名称</span>
      <!-- 根据下拉框是否有值 显示 -->
      <div v-if="value">
        <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="150px">

          <div style="margin-top: 1.5rem;">
            <el-form-item label="二手车车型名称" prop="esccxmc">
              <el-input clearable v-model="form.esccxmc"></el-input>
            </el-form-item>
            <el-form-item label="收购价格(元)" prop="sgjg">
              <el-input :size="size" style="width:100%;"  controls-position="right" :precision="2" :step="0.1" :min="0"
                v-model="form.sgjg">
              </el-input>
            </el-form-item>
            <el-form-item label="能源类型" prop="type">
             <el-select v-model="form.type" placeholder="请选择" style="width: 110%;">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="数量" prop="shuliang">
              <el-input :size="size" style="width:100%;"  controls-position="right" :precision="2" :step="0.1" :min="0"
                v-model="form.shuliang">
              </el-input>
            </el-form-item>
            <el-form-item label="收购日期" prop="sgrq" >
                <el-date-picker
                     v-model="form.sgrq"
                     type="date"
                     placeholder="选择日期">
                   </el-date-picker>
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <el-divider></el-divider>
      </div>
    </el-row>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        form1: {
        },
        param: {
          file: '',
        },
        saveBtnDisable: false,
        file2:null,
        limitNum: 1,  // 上传excell时，同时允许上传的最大数
        fileList:[],
        uploadlist:[],
        
        size: 'medium',

        //切换新增修改显示
        toggleShow: true,
        form: {
          //二手车车型名称
          esccxmc: '',
          //收购价格
          sgjg: '',
          //数量
          shuliang: '',
          //收购日期
          sgrq: '',
          //汽车类型
          type:'',
        },
        //修改下拉框的值
        options: {},
        //修改下拉框选择之后存的值
        value: '',
        //能源类型
        options2:[
           {
             value: '燃油车',
             label: '燃油车'
           }, {
             value: '新能源车',
             label: '新能源车',
           }
        ],
        rules: {
          esccxmc: [{
            required: true,
            message: '请输入二手车车型名称',
            trigger: 'blur'
          }],
          sgjg: [{
            required: true,
            message: '请输入收购价格(元)',
            trigger: 'blur'
          }],
          shuliang: [{
            required: true,
            message: '请输入数量',
            trigger: 'blur'
          }],
          sgrq: [{
            required: true,
            message: '请输入收购日期',
            trigger: 'blur'
          }],
          type:[{
            required: true,
            message: '请输入收购日期',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      /* ------------上传文件---------- */
      beforeupload(file) {
        this.param.file = file
        /* console.log(this.param) */
        return false;
      },
      fileChange(file, oldFile) {
        let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
        oldFile = [];
        if (fileType !== 'xlsx' && fileType !== 'xls' ) {
          this.$message.error("文件上传格式不正确");
          return false;
        }
        if (file.size / 1024 / 1024 > 1.5) {
          this.$message.error("文件大小不能超过2M");
          return false;
        }
        this.file = file.raw;
      },
      
      uplod(){
       /* this.$ajax.post("Excel2/twocompanyIn",{}).then(res =>{
      
        }) */
        this.param = {};
        emptyObj(this.form);
        this.$emit('show-dialog', this.form);
        this.dialogVisible = true;
      },
      qx(){
        /* console.log(this.$refs.upload); */
        this.dialogVisible=false
        this.$refs.upload.clearFiles()
      
        this.param.file = ''
        this.fileList = []
      },
      save1(){
        this.$refs.form1.validate(valid => {
          console.log(valid);
          console.log("啦啦啦");
          console.log(this.param.file);
          if (valid) {
            this.$ajax.post("Excel/newCarIn",{'inFile':this.param.file}).then(res=>{
                  console.log("上传成功");
                  this.dialogVisible=false
                  this.param.file = ''
                  this.fileList = []
                  this.$refs.upload.clearFiles()
                }).catch(error => {
                  this.$refs.upload.clearFiles()
                  this.dialogVisible=false
                  this.$notify({
                    title: '提示',
                    message: '上传模板错误',
                    type: 'warning',
                    position: 'bottom-right'
                  });
                 /* console.log("上传模板错误"); */
              })
          }
      
        })
      },
       /* ---------上传文件----------- */
      
      //切换v-if
      addShow() {
        console.log(this.form);
        this.toggleShow = true
        emptyObj(this.form)
        this.value = '';
      },
      editShow() {
        this.value = '';
        this.toggleShow = false
        emptyObj(this.form)
        this.editOptions();

      },

      //查找修改下拉框的值赋给options
      editOptions() {
        this.$ajax.post("usedcar/list", {}).then(res => {
          var result = res.data;
          if (result.success) {
            this.options = result.data;
          }
        })
      },

      //保存
      save() {
        this.$refs.form1.validate(valid => {
          if (valid) {

            this.$ajax.post("usedcar/save", this.form).then(res => {
              var result = res.data;
              if (result.success) {
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
                emptyObj(this.form)
                this.editOptions();
                this.value = '';
              }else{
                this.$notify({
                  title: '提示',
                  message: result.msg,
                  type: 'warning',
                  position: 'bottom-right'
                });
              }
            })

          }
        })
      },

      //选择下拉框
      editChange() {
        this.$ajax.post("usedcar/findById", {
          id: this.value
        }).then(res => {
          var result = res.data;
          if (result.success) {
            this.form = result.data;
            this.form.sgrq=new Date(this.form.sgrq);
            this.$set(this.form,"esccxmc",result.data.usedCar.esccxmc);
            this.form.id=result.data.usedCarId;
          }
        })
      },

 //点击下拉框×
    qingkong(){
      this.value='';
    }
    }
  }


  function emptyObj(obj) {
    if (obj.file) {
      obj.file = ""
    }
    if(obj.sgrq){
      obj.sgrq=""
    }
    for (var key in obj) {
      var o = obj[key];
      if (o instanceof Object) {
        emptyObj(o);
      } else {
        obj[key] = '';
      }
    }
  }
</script>

<style>
</style>
